<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-size: 13px;
            line-height: 25px;
        }

        table {
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            width: 300px;
        }

        td {
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
        }

        .center {
            text-align: center;
        }
    </style>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script>
        //179000612陈攀文
        function addRow() {
            //末尾添加
            let newrow = "<tr id='row4'><td>幸福从天而降</td><td class='center'>&yen;18.50</td></tr>";
            $("#myTable").append(newrow);


        }

        function updateRow() {
        //修改标题样式
            $("#row1").css({"font-weight":"bold","text-align":"center","background-color":"#cccccc"});
        }



        function delRow() {
        //删除第2行
            //let deteleRow = $("tr:eq(2)").remove();
            let deteleRow = $("tr:eq(2)");
            deteleRow.remove();

        }

        function copyRow() {
        //复制最后一行
            let copyrow = $("tr:last").clone();
            $("#myTable").append(copyrow);
        }
    </script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
    <tr id="row1">
        <td>书名</td>
        <td>价格</td>
    </tr>
    <tr id="row2">
        <td>看得见风景的房间</td>
        <td class="center">&yen;30.00</td>
    </tr>
    <tr id="row3">
        <td>60个瞬间</td>
        <td class="center">&yen;32.00</td>
    </tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
</body>
</html>